<!--
 * @Author: sxb
 * @Email: sxb@mail.com
 * @Date: 2020-11-25 09:12:26
 * @Descripttion: 
-->
<template>
  <div class="app-container calendar-list-container">
    <basic-container>
      <el-form
        :model="searchForm"
        ref="searchFormRef"
        label-width="80px"
        :inline="true"
        size="small"
      >
        <el-form-item label="规格名称">
          <el-input v-model="searchForm.Title" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select v-model="searchForm.ParentId" placeholder="请选择" @change="handleaCode" clearable>
            <el-option
              v-for="item in aList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
          <el-select v-model="searchForm.bCode" placeholder="请选择" clearable>
            <el-option
              v-for="item in bList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="searchChange">查询</el-button>
          <el-button icon="el-icon-delete" @click="handleClear">重置</el-button>
        </el-form-item>
      </el-form>
      <avue-crud
        ref="crud"
        :option="tableOption"
        :data="list"
        :page="page"
        v-model="form"
        :table-loading="listLoading"
        @on-load="getList"
        @size-change="sizeChange"
        @current-change="currentChange"
        @refresh-change="refreshChange"
      >
        <template slot="menuLeft">
          <el-button
            v-if="menuPermissions_btn_add"
            class="filter-item"
            type="primary"
            icon="el-icon-plus"
            @click="handleCreate"
          >添加</el-button>
        </template>

        <template slot="menu" slot-scope="scope">
          <el-button
            v-if="menuPermissions_btn_manage"
            type="text"
            size="small"
            icon
            @click="handleManage(scope.row, scope.index)"
          >管理子项</el-button>
          <el-button
            v-if="menuPermissions_btn_del"
            type="text"
            size="small"
            icon="el-icon-delete"
            @click="handleDelete(scope.row, scope.index)"
          >删除</el-button>
        </template>
      </avue-crud>
    </basic-container>
    <el-dialog :visible.sync="addSizeVisible" title="新增" width="60%" @close="addItemVisible">
      <el-form :model="addForm" ref="addForm" label-width="90px" size="small" :rules="addrules">
        <el-form-item label="店铺ID" prop="ShopId">
          <el-input v-model="addForm.ShopId" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属分类" prop="ParentId">
          <el-select v-model="addForm.ParentId" placeholder="请选择" @change="handleaAddCode" clearable>
            <el-option
              v-for="item in aList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="bCode">
          <el-select v-model="addForm.bCode" placeholder="请选择" clearable>
            <el-option
              v-for="item in bList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="规格名称" prop="Title">
          <el-input v-model="addForm.Title"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addFormSubmit('addForm')">保存</el-button>
        <el-button icon @click="addCategoryVisible = fasle">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="manageSizeVisible"
      title="管理子项"
      width="60%"
      @close="manageItemVisible"
    >
      <manage-form :Id="Id"></manage-form>
    </el-dialog>
    <!-- <el-dialog
      :visible.sync="addManageVisible"
      title="新增"
      width="60%"
      @close="addManageItemVisible"
    >111</el-dialog>-->
  </div>
</template>

<script>
import { getSizeList, addSize, deleteSize } from "@/api/platProduct/size";
import { getCategoryType } from "@/api/platProduct/category";
import { tableOption } from "@/const/crud/platProduct/product-size";

import manageForm from "./manage-form";

// import func from "../../../../vue-temp/vue-editor-bridge";
export default {
  name: "productSize",
  data() {
    return {
      tableOption: tableOption,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
      },
      list: [],
      listLoading: false,
      form: {},
      menuPermissions_btn_add: true,
      menuPermissions_btn_manage: true,
      menuPermissions_btn_del: true,
      aList: [],
      bList: [],
      code: "", //存放上次的code
      searchForm: {
        ParentId: "", //这是选择后存进去的value
        bCode: "",
        Title: "",
      },
      //弹出框
      addSizeVisible: false,
      manageSizeVisible: false,
      // editSizeVisible: false,
      // editForm: {},
      addForm: {
        ParentId: "", //这是选择后存进去的value
        bCode: "",
        Title: "",
        ShopId: "",
      },
      addrules: {
        ParentId: [
          { required: true, message: "请输入所属大类", trigger: "change" },
        ],
        bCode: [{ required: true, message: "请输入所属类", trigger: "change" }],
        Title: [{ required: true, message: "请输入规格名称", trigger: "blur" }],
        ShopId: [{ required: true, message: "请输入店铺ID", trigger: "blur" }],
      },
      //管理子项
      Id: "",
    };
  },
  components: {
    manageForm,
  },
  methods: {
    getList(page) {
      let _param = {
        GoodsTypeId: this.searchForm.bCode || this.searchForm.ParentId || "",
        Title: this.searchForm.Title,
      };
      let _jsonData = Object.assign(_param, {
        page: page.currentPage,
        limit: page.pageSize,
      });
      this.listLoading = true;
      getSizeList(_jsonData)
        .then((res) => {
          if (res.status == 200) {
            if (res.data.code == 0) {
              this.list = res.data.data.Data;
              this.page.total = res.data.data.Cnt;
              this.listLoading = false;
            }
          }
        })
        .catch((error) => {
          console.log(error);
           this.listLoading = false;
        });
    },
    searchChange() {
      this.page.currentPage = 1;
      this.getList(this.page);
    },
    handleClear(){
        this.searchForm = {};
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },
    refreshChange() {
      this.getList(this.page);
    },
    //一级
    getCategoryTypeOne(ID) {
      let params = {
        ParentId: ID,
        SelectId: "",
      };
      getCategoryType(params)
        .then((res) => {
          if (res.data.code == 0) {
            let data = res.data.data;
            let dicData = [];
            data.forEach((ele) => {
              var obj = {
                label: ele.Text,
                value: ele.Value,
              };
              dicData.push(obj);
            });
            this.aList = dicData;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //二级
    handleaCode(value) {
      // 修改选项时操作
      if (value !== this.code) {
        //判断是否是上次的值，不是的话就清空二级的select
        this.code = value; //把现在的值在赋值上
        this.searchForm.bCode = "";
      }
      if (value.length === 0) {
        //如果一级的code为空的话就直接不执行下面的函数
        return;
      }
      let params = {
        ParentId: value,
        SelectId: "",
      };
      getCategoryType(params)
        .then((res) => {
          if (res.data.code == 0) {
            let data = res.data.data;
            let dicData = [];
            data.forEach((ele) => {
              var obj = {
                label: ele.Text,
                value: ele.Value,
              };
              dicData.push(obj);
            });
            this.bList = dicData;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //新增
    handleCreate(row) {
      this.addSizeVisible = true;
    },
    addItemVisible() {
      this.addSizeVisible = false;
      this.addForm = {};
    },
    addFormSubmit() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          let params = {
            GoodsTypeId: this.addForm.bCode,
            Title: this.addForm.Title,
            ShopId: this.addForm.ShopId,
          };
          addSize(params)
            .then((res) => {
              if (res.status == 200) {
                this.$message.success(res.data.msg);
                this.addSizeVisible = false;
                this.addForm = {};
                this.searchForm = {};
                this.getList(this.page);
              }
            })
            .catch((error) => {
              console.log(error);
            });
        }
      });
    },
    //新增二级
    handleaAddCode(value) {
      // 修改选项时操作
      if (value !== this.code) {
        //判断是否是上次的值，不是的话就清空二级的select
        this.code = value; //把现在的值在赋值上
        this.addForm.bCode = "";
      }
      if (value.length === 0) {
        //如果一级的code为空的话就直接不执行下面的函数
        return;
      }
      let params = {
        ParentId: value,
        SelectId: "",
      };
      getCategoryType(params)
        .then((res) => {
          if (res.data.code == 0) {
            let data = res.data.data;
            let dicData = [];
            data.forEach((ele) => {
              var obj = {
                label: ele.Text,
                value: ele.Value,
              };
              dicData.push(obj);
            });
            this.bList = dicData;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    //管理子项
    handleManage(row) {
      this.manageSizeVisible = true;
      this.Id = row.Id;
    },
    manageItemVisible() {
      this.manageSizeVisible = false;
    },

    //删除
    handleDelete(row, index) {
      this.$confirm(
        '是否确认删除名称为"' + row.Title + '"' + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          let param = {
            Id: row.Id,
          };
          return deleteSize(param); //返回删除的方法
        })
        .then(() => {
          this.getList(this.page);
          this.$message.success("删除成功");
          // this.$notify.success("删除成功");
        });
    },
  },
  created() {
    this.getCategoryTypeOne(0);
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
</style>